import QtQuick 2.0

Item {
    id: root
    anchors.fill: parent
    property int duration: 3000

    Rectangle {
        id: sky
        width: parent.width
        height: parent.height * 0.6
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }
    Rectangle {
        id: ground
        width: parent.width
        anchors.top: sky.bottom
        anchors.bottom: root.bottom
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }
    Image {
        id: ball
        x: 20; y: 330
        scale: 0.5
        source: "assets/soccer_ball.png"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x = 20
                ball.y = 330
                ball.rotation = 0
                anim.start()
            }
        }
    }
    ParallelAnimation {
        id: anim
        loops: Animation.Infinite
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 80
                duration: root.duration * 0.4
                easing.type: Easing.OutCirc
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: 330
                duration: root.duration * 0.6
                easing.type: Easing.OutBounce
            }
        }
        NumberAnimation {
            target: ball
            properties: "x"
            to: 450
            duration: root.duration
        }
        RotationAnimation {
            target: ball
            to: 360
            duration: root.duration
        }
    }
}
